<template>
  <view class="my_order">
    <view class="search">
      <u-search
        placeholder="请输入要搜索的订单"
        v-model="search_text"
        :clearabled="true"
        :show-action="false"
        bg-color="#fff"
        class="search_box"
        @search="searchOrder"
        @clear="clearOrder"
      ></u-search>
    </view>
    <view class="nav" v-if="orderType != 'refund'">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="current"
        @change="tabChange"
        class="nav_box"
        active-color="#A084F0"
        inactive-color="#111111"
        font-size="26"
        bar-style=""
        bg-color="#f2f2f2"
      ></u-tabs>
    </view>
    <view class="main">
      <scroll-view
        scroll-y="true"
        enable-back-to-top
        @scrolltolower="loadMore"
        class="scroll_box"
      >
        <view class="main_box" v-for="(item, index) in orderList" :key="index">
          <view class="top">
            <view class="number">订单号: {{ item.order_sn }}</view>
            <view class="leixing">{{ order_status[item.order_status] }}</view>
          </view>
          <view
            :class="
              item.item_list.length > 10 && item.showSmall == true
                ? 'smallStyle'
                : ''
            "
          >
            <view
              class="center"
              @click="
                onClickHandle('', 'toOrderDetail', {
                  id: item.id,
                  status: item.order_status,
                })
              "
              v-for="(data, index) in item.item_list"
              :key="index"
            >
              <view class="img_box">
                <img :src="data.image" alt="" />
              </view>
              <view class="lingpai">
                <img :src="levelImg[data.level_id]" alt="" />
              </view>
              <view class="title">
                <view class="top_title">{{ data.title }}</view>
                <view class="xilie">{{ data.ip_name }}</view>
              </view>
              <view class="right">
                <view class="jiage">
                  <text class="fuhao">￥</text>
                  <text class="price">{{ data.price }}</text>
                </view>
                <view class="shu_box">
                  <text class="fuhao">x</text>
                  <text class="shuliang">{{ data.goods_num }}</text>
                </view>
              </view>
            </view>
          </view>
          <!-- 超出10行商品显示隐藏 -->
          <view class="slectMore" v-if="item.item_list.length > 10">
            <view
              class="lookMore"
              v-if="item.showSmall"
              @tap="showMore(item, index)"
            >
              <view class="text">查看更多</view>
              <u-icon name="arrow-down" color="#979797" size="18"></u-icon>
            </view>
            <view
              class="lookMore"
              v-if="!item.showSmall"
              @tap="showHide(item, index)"
            >
              <view class="text">隐藏更多</view>
              <u-icon name="arrow-up" color="#979797" size="18"></u-icon>
            </view>
            <view class="lookNum">
              <view class="num_text">共计数量：</view>
              <view class="num">{{ item.order_goods_num }}个</view>
            </view>
          </view>
          <view class="bottom">
            <!-- <view
              class="quxiaoBtn"
              v-if="item.order_status == '待付款'"
              @click="onClickHandle('', 'quxiaoOrder', {})"
              >取消订单</view
            > -->
            <view
              :class="item.is_balance == 1 ? 'zhifuBtn' : 'no_balanceBtn'"
              v-if="item.order_status == 'unpaid'"
              @click="
                onClickHandle('', 'CreatePayOrder', {
                  id: item.id,
                  order_sn: item.order_sn,
                  is_balance: item.is_balance,
                  goods_id: item.goods_id,
                  goods_num: item.order_goods_num,
                })
              "
              >立即支付</view
            >
            <view
              class="quxiaoBtn"
              v-if="item.order_status == 'unreceived'"
              @click="
                onClickHandle('', 'yesShouhuo', { yesShouhuoId: item.id })
              "
              >确认收货</view
            >
			<view
			  class="quxiaoBtn"
			  v-if="item.order_status == 'unreceived'"
			  @click="
			    onClickHandle('', 'express', { yesShouhuoId: item.id })
			  "
			  >查看物流</view
			>
            <view
              class="lianBtn"
              v-if="item.order_status == 'unreceived'"
              @click="onClickHandle('', 'onService', {})"
              >联系客服</view
            >
            <!-- <view
              class="quxiaoBtn"
              v-if="item.order_status == '待发货'"
              @click="onClickHandle('', 'delFahuo', {})"
              >取消发货</view
            >
            <view
              class="quxiaoBtn"
              v-if="item.order_status == '待发货'"
              @click="onClickHandle('', 'tixing', {})"
              >提醒发货</view
            > -->
            <view
              class="lookBtn"
              v-if="
                item.order_status == 'undelivered' ||
                item.order_status == 'complete'
              "
              @click="onClickHandle('', 'toOrderDetail', { id: item.id })"
              >查看订单</view
            >
            <view
              class="quxiaoBtn"
              v-if="item.order_status == 'refund'"
              @click="onClickHandle('', 'deleteRefundOrder', { id: item.id })"
              >删除订单</view
            >
            <view
              class="zhifuBtn"
              v-if="
                item.order_status == 'refund' ||
                item.order_status == 'refunding'
              "
              @click="onClickHandle('', 'to_after_sales', { id: item.id })"
              >售后详情</view
            >
          </view>
        </view>
        <!-- 更多 -->
        <u-loadmore
          v-show="!isEmpty"
          height="80rpx"
          :status="loadStatus"
          icon-type="flower"
          color="#ccc"
        />
        <!-- 缺省页 -->
        <shopro-empty
          v-if="isEmpty"
          :image="
            $IMG_URL + '/uploads/20230527/7bf7170bf689ac42877424b5ded12137.png'
          "
          tipText="您暂时还没有任何订单~"
        ></shopro-empty>
        <u-modal
          v-model="showYesShouhuo"
          content="确认收货后钱款将打给商家"
          title="确认已收到货"
          :show-cancel-button="true"
          confirm-text="开心收货"
          cancel-text="狠心取消"
          cancel-color="#FBECE9"
          width="690"
          :title-style="titleStyle"
          :content-style="contentStyle"
          :cancel-style="quxiaoStyle"
          :confirm-style="yesStyle"
          @confirm="toconfirm()"
          class="modal_box"
        ></u-modal>
      </scroll-view>
    </view>

    <view class="tankuang_fahuo">
      <u-modal
        v-model="showDelFahuo"
        content="取消发货后，物品将返回您的盒柜，运费将返回原支付账户，是否确认取消发货?"
        title="确认要取消发货吗"
        show-cancel-button="true"
        confirm-text="容我想想"
        cancel-text="狠心取消"
        cancel-color="#FBECE9"
        width="690"
        :title-style="titleStyle"
        :content-style="contentStyle"
        :cancel-style="quxiaoStyle"
        :confirm-style="quedingStyle"
        class="modal_box"
      ></u-modal>

      <u-modal
        v-model="showQuxiaoOrder"
        content="相遇不易，再考虑考虑呗~"
        title="真的要取消订单吗"
        show-cancel-button="true"
        confirm-text="继续下单"
        cancel-text="狠心取消"
        cancel-color="#FBECE9"
        width="690"
        :title-style="titleStyle"
        :content-style="contentStyle"
        :cancel-style="quxiaoStyle"
        :confirm-style="yesStyle"
        class="modal_box"
      ></u-modal>
    </view>
    <shopro-pay-model
      @change-pay-mod="changePayMod"
      @payed="onPayed"
      v-if="payModOpen"
      activity-type="direct_goods"
      :details="payDetails"
    ></shopro-pay-model>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import le1 from './images/le1.png';
import le2 from './images/le2.png';
import le3 from './images/le3.png';
import le4 from './images/le4.png';
import le5 from './images/le5.png';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  data: () => ({
    searchWord: '',
    tabList: [
      {
        name: '全部',
      },
      // {
      //   name: '待付款',
      // },
      {
        name: '待发货',
      },
      {
        name: '待收货',
      },
      {
        name: '已完成',
      },
    ],
    current: 0,
    showDelFahuo: false,
    titleStyle: {
      fontSize: '30rpx',
      fontFamily: 'PingFang SC-Heavy, PingFang SC',
      fontWeight: 700,
      color: '#3D3D3D',
    },
    contentStyle: {
      fontSize: '24rpx',
      fontFamily: 'PingFang SC-Medium, PingFang SC',
      fontWeight: 400,
      color: '#3D3D3D',
      lineHeight: '34rpx',
      paddingLeft: '126rpx',
      width: '650rpx',
    },
    quedingStyle: {
      width: '290rpx',
      height: '80rpx',
      borderRadius: '40rpx',
      opacity: 1,
      border: '2rpx solid #F2F2F2',
      textAlign: 'center',
      lineHeight: '80rpx',
      color: '#E9776D',
      background: '#FBECE9',
      margin: '20rpx',
    },
    quxiaoStyle: {
      width: '290rpx',
      height: '80rpx',
      borderRadius: '40rpx',
      opacity: 1,
      border: '2rpx solid #F2F2F2',
      textAlign: 'center',
      lineHeight: '80rpx',
      color: '#979797',
      margin: '20rpx',
    },
    yesStyle: {
      width: '290rpx',
      height: '80rpx',
      borderRadius: '40rpx',
      opacity: 1,
      border: '2rpx solid #F2F2F2',
      textAlign: 'center',
      lineHeight: '80rpx',
      color: '#fff',
      background: 'linear-gradient(212deg, #6AC6FF 0%, #A084F0 100%)',
      margin: '20rpx',
    },
    showYesShouhuo: false,
    showQuxiaoOrder: false,
    orderList: [],
    lastPage: 1,
    currentPage: 1,
    loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
    orderType: 'all',
    yesShouhuoId: 0,
    //通过ID控制令牌的底板颜色
    levelImg: {
      1: le1,
      2: le2,
      3: le3,
      4: le4,
      5: le5,
    },
    //订单状态文本
    order_status: {
      unpaid: '待付款',
      refunding: '退款中',
      refund: '已退款',
      undelivered: '待发货',
      unreceived: '待收货',
      complete: '已完成',
    },
    isEmpty: false,
    search_text: '',
    rows: 10,
    //下拉完成到底
    finished: false,
    payModOpen: false,
    payDetails: {},
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {
    if (this.$Route.query.orderType) {
      this.orderType = this.$Route.query.orderType;

      switch (this.orderType) {
        case 'all':
          this.current = 0;
          break;
        case 'unpaid':
          this.current = 1;
          break;
        case 'undelivered':
          this.current = 1;
          break;
        case 'unreceived':
          this.current = 2;
          break;
        case 'complete':
          this.current = 3;
          break;
        case 'refund':
          this.afterSales();
          break;
      }
    }
    this.orderList = [];
    this.currentPage = 1;
    this.lastPage = 1;
    this.getOrderList();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapMutations(['CartOnshow']),
    // 获取订单列表
    getOrderList() {
      this.loadStatus = 'loading';
      this.$http(
        'v1.getOrderList',
        {
          order_status: this.orderType,
          search_text: this.search_text,
          page: this.currentPage,
          rows: this.rows,
        },
        '加载中...'
      ).then((res) => {
        if (res.code === 1) {
          this.orderList = [...this.orderList, ...res.data.list];
          this.orderList = this.orderList.map((item) => {
            //控制订单商品多的隐藏
            item.showSmall = true;
            return item;
          });
          if (res.data.list.length < this.rows) {
            this.finished = true;
            this.loadStatus = 'nomore';
          }
          this.isEmpty = this.orderList.length == 0 ? true : false;
          //console.log(this.orderList);
          // this.lastPage = res.data.last_page;
          // this.loadStatus =
          //   this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
          // this.isEmpty = this.orderList.length == 0 ? true : false;
        }
      });
    },

    // 加载更多
    loadMore() {
      if (this.finished) return;
      this.currentPage += 1;
      this.getOrderList();
    },
    //搜索订单
    searchOrder() {
      this.finished = false;
      this.orderList = [];
      this.currentPage = 1;
      this.getOrderList();
    },
    clearOrder() {
      this.finished = false;
      this.orderList = [];
      this.currentPage = 1;
      this.getOrderList();
    },
    tabChange(index) {
      this.current = index;
      this.finished = false;
      switch (index) {
        case 0:
          this.orderType = 'all';
          break;
        case 1:
          // this.orderType = 'unpaid';
          this.orderType = 'undelivered';
          break;
        case 2:
          this.orderType = 'unreceived';
          break;
        case 3:
          this.orderType = 'complete';
          break;
        case 4:
          this.orderType = 'complete';
          break;
      }
      this.orderList = [];
      this.currentPage = 1;
      this.getOrderList();
    },
    tixing() {
      uni.showToast({
        title: '已催促尽快发货，请您耐心等待',
        duration: 2000,
      });
    },
    delFahuo() {
      // uni.showModal({
      //   title: '确认要取消发货吗',
      //   content:
      //     '取消发货后，物品将返回您的盒柜，运费将返回原支付账户，是否确认取消发货?',
      //   cancelText: '容我想想',
      //   confirmText: '狠心取消',
      //   success: function (res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定');
      //     } else if (res.cancel) {
      //       console.log('用户点击取消');
      //     }
      //   },
      // });
      this.showDelFahuo = true;
    },
    yesShouhuo(yesShouhuoId) {
      this.showYesShouhuo = true;
      this.yesShouhuoId = yesShouhuoId;
    },
    quxiaoOrder(yesShouhuoId) {
      this.showQuxiaoOrder = true;
    },
    toOrderDetail(data) {
      if (data.status == 'unpaid') {
        this.$Router.push({
          path: '/pages/my_order/noPay_detail',
          query: { id: data.id },
        });
      }
      if (data.status == 'refunding' || data.status == 'refund') {
        this.$Router.push({
          path: '/pages/my_order/after_sales',
          query: { id: data.id },
        });
      } else {
        this.$Router.push({
          path: '/pages/my_order/order_detail',
          query: { id: data.id },
        });
      }
    },
    noPayDetail(data) {
      this.$Router.push({
        path: '/pages/my_order/noPay_detail',
        query: { id: data.id },
      });
    },
    //确认收货
    toconfirm() {
      this.confirm();
    },
    // 确认收货接口
    confirm() {
      this.$http(
        'order.confirm',
        {
          id: this.yesShouhuoId,
          //order_item_id必须传，传什么都行，不然会报错
          order_item_id: '1',
        },
        '加载中...'
      ).then((res) => {
        if (res.code === 1) {
          this.orderList = [];
          this.getOrderList();
          uni.showToast({
            title: '成功确认收货',
            duration: 2000,
          });
        }
      });
    },
    // 跳转客服
    onService() {
      this.$Router.push('/pages/public/chat/index');
    },
    //跳转售后详情
    toAfterSales(data) {
      this.$Router.push({
        path: '/pages/my_order/after_sales',
        query: { id: data.id },
      });
    },
    //退款售后列表
    afterSales() {
      uni.setNavigationBarTitle({
        title: '退款售后',
      });
    },
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'tixing':
            this.tixing();
            break;
          case 'delFahuo':
            this.delFahuo();
            break;
          case 'yesShouhuo':
            this.yesShouhuo(data.yesShouhuoId);
            break;
          case 'quxiaoOrder':
            this.quxiaoOrder();
            break;
          case 'toOrderDetail':
            this.toOrderDetail(data);
            break;
          case 'CreatePayOrder':
            this.CreateBalanceOrder(data);
            break;
          case 'onService':
            this.onService();
            break;
          case 'to_after_sales':
            this.toAfterSales(data);
            break;
          case 'deleteRefundOrder':
            this.deleteRefundOrder(data);
            break;
			case 'express':
			  this.onExpress(data.yesShouhuoId);
			  break;
        }
      });
    },
	// 查看物流
	onExpress(orderId) {
	  this
	    .$http('order.expressList', {
	      order_id: orderId,
	    })
	    .then((res) => {
	      if (res.code === 1) {
	        if (res.data.length == 1) {
				this.$Router.push({
				  path: '/pages/order/express/express-detail',
				  query: {orderId: orderId, expressId: res.data[0].id},
				});
	        
	        } else if (res.data.length > 1) {
				this.$Router.push({
				  path: '/pages/order/express/express-list',
				  query: {orderId: orderId},
				});
	        } else {
				uni.showToast({
				  title: '暂无包裹',
				  icon:"none"
				});
	        }
	      }
	    });
	},
    //拉出隐藏商品
    showMore(item, index) {
      item.showSmall = false;
      this.$set(this.orderList, index, item);
    },
    //隐藏商品
    showHide(item, index) {
      item.showSmall = true;
      this.$set(this.orderList, index, item);
    },
    //创建支付尾款订单,如果在支付尾款阶段就创建订单并支付，如果不是就跳转详情页
    CreateBalanceOrder(data) {
      if (data.is_balance == 1) {
        this.$http(
          'v1.createOrder',
          {
            activity_type: 'prepare_balance',
            order_sn: data.order_sn,
            goods_id: data.goods_id,
            goods_num: data.goods_num,
          },
          '加载中'
        ).then((res) => {
          if (res.code === 1) {
            this.payModOpen = true;
            this.payDetails.total_amount = res.data.total_amount;
            this.payDetails.discounts_amount = res.data.discounts_amount;
            this.payDetails.original_amount = res.data.original_amount;
            this.payDetails.order_sn = res.data.order_sn;
            this.payDetails.money = res.data.money;
          }
        });
      } else {
        this.$Router.push({
          path: '/pages/my_order/noPay_detail',
          query: { id: data.id },
        });
      }
    },
    // 显示隐藏支付
    changePayMod(ev) {
      this.payModOpen = ev;
      this.payDetails = {};
    },
    //支付结果
    onPayed() {
      this.payModOpen = false;
      this.CartOnshow(true);
      this.finished = false;
      this.orderList = [];
      this.currentPage = 1;
      this.getOrderList();
      uni.showToast({
        title: '支付成功',
        duration: 2000,
        icon: 'success',
        success: (res) => {},
      });
    },
    //删除售后订单
    deleteRefundOrder(data) {
      uni.showModal({
        title: '是否删除订单？',
        success: (yes) => {
          if (yes.confirm) {
            this.$http(
              'v1.deleteRefundOrder',
              {
                id: data.id,
              },
              '加载中'
            ).then((res) => {
              if (res.code === 1) {
                uni.showToast({
                  title: '删除成功',
                  duration: 2000,
                });
                this.getOrderList();
              }
            });
          }
        },
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.my_order {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  height: 100%;
  .search {
    width: 100%;
    height: 96rpx;
    padding: 22rpx 59rpx 0;
    box-sizing: border-box;
    .search_box {
      width: 632rpx;
      height: 65rpx;
      background: #ffffff !important;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
    }
  }
  .nav {
    background-color: #f2f2f2;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  .main {
    flex: 1;
    overflow: auto;
    background-color: #f2f2f2;
    padding: 10rpx 30rpx;
    .scroll_box {
      width: 100%;
      height: 100%;
      .main_box {
        width: 690rpx;
        // height: 300rpx;
        background-color: #fff;
        padding: 32rpx 20rpx 31rpx 32rpx;
        box-sizing: border-box;
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 22rpx;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30rpx;
          width: 100%;
          margin-bottom: 26rpx;
          .number {
            font-size: 22rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
          }
          .leixing {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #a084f0;
            line-height: 19rpx;
          }
        }
        .smallStyle {
          height: 124rpx;
          overflow: hidden;
        }
        .center {
          display: flex;
          justify-content: space-between;
          height: 122rpx;
          width: 100%;
          margin-bottom: 10rpx;
          .img_box {
            width: 122rpx;
            height: 122rpx;
            margin-right: 20rpx;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .lingpai {
            position: relative;
            width: 35rpx;
            height: 49rpx;
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%) scale(0.96);
              width: 100%;
              height: 100%;
            }
            text {
              position: relative;
              z-index: 1;
              width: 100%;
              height: 100%;
              font-size: 18rpx;
              font-family: FZShaoEr-M11S-Regular, FZShaoEr-M11S;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 49rpx;
              display: block;
            }
          }
          .title {
            flex: 1;
            margin-left: 10rpx;
            .top_title {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 700;
              color: #111111;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 300rpx;
            }
            .xilie {
              font-size: 18rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #666666;
            }
          }
          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .jiage {
              .fuhao {
                font-size: 28rpx;
                font-family: Source Han Sans CN-Normal, Source Han Sans CN;
                font-weight: 350;
                color: #de3249;
              }
              .price {
                font-size: 28rpx;
                font-family: DIN-Bold;
                font-display: swap;
                font-weight: 700;
                color: #de3249;
              }
            }
            .shu_box {
              display: flex;
              justify-content: flex-end;
              .fuhao {
                font-size: 20rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 400;
                color: #3d3d3d;
              }
              .shuliang {
                font-size: 24rpx;
                font-family: Oswald-Regular, Oswald;
                font-weight: 400;
                color: #3d3d3d;
              }
            }
          }
        }
        .slectMore {
          width: 100%;
          height: 47rpx;
          background: #f0f0f0;
          border-radius: 9rpx 9rpx 9rpx 9rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 26rpx;
          position: relative;
          .lookMore {
            display: flex;
            align-items: center;
            .text {
              font-size: 17rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 400;
              color: #979797;
            }
          }
          .lookNum {
            position: absolute;
            display: flex;
            align-items: center;
            right: 17rpx;
            .num_text {
              font-size: 17rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 400;
              color: #666666;
            }
            .num {
              font-size: 23rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #000000;
            }
          }
        }
        .bottom {
          display: flex;
          justify-content: flex-end;
          margin-top: 11rpx;
          .quxiaoBtn {
            width: 137rpx;
            height: 51rpx;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 1rpx solid #c0bec2;
            line-height: 51rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #111111;
            margin-left: 16rpx;
            box-sizing: border-box;
          }
          .zhifuBtn {
            width: 137rpx;
            height: 51rpx;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 1rpx solid #de3249;
            line-height: 51rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #de3249;
            margin-left: 16rpx;
            box-sizing: border-box;
          }
          .no_balanceBtn {
            width: 137rpx;
            height: 51rpx;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            line-height: 51rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #fff;
            margin-left: 16rpx;
            box-sizing: border-box;
            background: #c7c7c7;
          }
          .lianBtn {
            width: 137rpx;
            height: 51rpx;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 1rpx solid #a084f0;
            line-height: 51rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #a084f0;
            margin-left: 16rpx;
            box-sizing: border-box;
          }
          .lookBtn {
            width: 137rpx;
            height: 51rpx;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 1rpx solid #61c58f;
            line-height: 51rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #61c58f;
            margin-left: 16rpx;
            box-sizing: border-box;
          }
        }
      }
    }
  }
  .tankuang_fahuo {
    /deep/ .u-model__footer {
      justify-content: space-between;
      border: none;
      padding: 30rpx;
      .u-model__footer__button {
        flex: none !important;
      }
      .u-border-top-bottom {
        position: static;
      }
      // .u-border:after {
      //   border: none !important;
      // }
    }
  }
}
.modal_box {
  /deep/ .u-border-top:after {
    border-top: none;
  }
}
</style>
